$(function(){
    var cbar = $('#demo-bar-chart');
    var carea = $('#demo-area-chart');
    var cdonut =$('#demo-donut-chart');
    if(cbar.length>0) initBarChart(cbar);
    if(carea.length>0) initAreaChart(carea);
    if(cdonut.length>0) initPieChart(cdonut);
});

function initBarChart(jdiv) {
    require(['echarts','echarts/chart/bar'],function(ec){
        var myChart = ec.init(jdiv.get(0));
        var option={
            title:{
                text:'上海市降水量与蒸发量',
                subtext:'纯属虚构'
            },
            tooltip : {
                trigger : 'axis'
            },
            lengend : {
                data :['蒸发量','降水量']
            },
            toobox : {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [{
                type: 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }],
            yAxis :[{
                type : 'value'
            }],
            series : [{
                name:'蒸发量',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },{
                name:'降水量',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
            ]
        };
        myChart.setOption(option);
    });
}

function initAreaChart(jdiv) {
    require(['echarts','echarts/chart/line'],function(ec) {
        var myChart = ec.init(jdiv.get(0));
        var option = {
            tooltip : {
                trigger : 'axis'
            },
            lengend : {
                data :['iphone','ipad','itouch']
            },
            toobox : {
                show : false
            },
            calculable : true,
            xAxis : [{
                type: 'category',
                data : ['2010 Q1','2010 Q2','2010 Q3','2010 Q4','2011 Q1','2011 Q2','2011 Q3','2011 Q4','2012 Q1','2012 Q2']
            }],
            yAxis :[{
                type : 'value'
            }],
            series :[{
                name :'iphone',
                type : 'line',
                stack : '总量',
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data : [2666,2778,4912,3767, 6810,5670,4820,15073, 10687,8432 ]
            },{
                name :'ipad',
                type : 'line',
                stack : '总量',
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data : [0,2294,1969,3597, 1914,4293,3795,5967, 4460,5713]
            },{
                name :'itouch',
                type : 'line',
                stack : '总量',
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data : [2647,2441,2501,5689, 2293,1881,1588,5175, 2028,1791 ]
            }]
        };
        myChart.setOption(option);
    });
}

function initPieChart(jdiv) {
    require(['echarts','echarts/chart/pie'],function(ec) {
        var myChart = ec.init(jdiv.get(0));
        var option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['下载销量','店内销量','推广销量']
            },
            toolbox : {show :false},
            calculable : true,
            series :[{
                name:'销量途径分布',
                type:'pie',
                radius : ['50%', '70%'],
                itemStyle : {
                    normal : {
                        label : {
                            show : false
                        },
                        labelLine : {
                            show : false
                        }
                    },
                    emphasis : {
                        label : {
                            show : true,
                            position : 'center',
                            textStyle : {
                                fontSize : '16',
                                fontWeight : 'bold'
                            }
                        }
                    }
                },
                data:[
                    {value:12, name:'下载销量'},
                    {value:30, name:'店内销量'},
                    {value:20, name:'推广销量'}
                ]
            }]
        };
        myChart.setOption(option);
    });
}